<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="../inc.jsp"></jsp:include>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div#tb ul{
				list-style: none;
				margin-top: 5px;
				margin-left: 0px;
			}
			div#tb ul li{
				list-style: none;
				float: left;
				width: 60px;
			}
		</style>
	</head>
	<body class="easyui-layout" onkeydown="keydown()" onkeyup="keyup()">   
		<script type="text/javascript">
		    var dg;
		    function keydown(event){
				var e = event||window.event;
				var code = e.keyCode;
				if(code==17){
					dg.datagrid('options').singleSelect=false;
				}else if(code==13){
					//queryData();
				}
			}
			function keyup(event){
				var e = event||window.event;
				var code = e.keyCode;
				if(code==17){
					dg.datagrid('options').singleSelect=true;
				}
			}
			
		    var json = [{type:'1',name:'hqj',sex:'1',address:'南宁'},{type:'2',name:'hqj',sex:'1',address:'南宁'}];
			$(function(){
				
				dg = $('#table').datagrid({
					fit:true,
					url:'${ctx}/fc/find.coc',
					singleSelect:true,
					rownumbers:true,
					pagination:true,
					fitColumns:true,
					sortName:'createDate',		// 排序的字段
					sortOrder:'desc',			// 升序或者降序
					remoteSort:false,			// 定义从服务器对数据进行排序。
					columns:[[
						{field:'ck',checkbox:true,width:50},
						{field:'iotype',title:'类型',width:100,fixed:true,align:'center',
							formatter:function(v,r,i){
								//alert(r.type);
								if(r.iotype==0){
									v = '收入';
								}else if (r.iotype==1) {
									v = '支出';
								}else {
									v = '其他';
								}
								return v;
							}
						},
						{field:'detaType',title:'详细类型',width:100,fixed:true,align:'center'},
						{field:'amount',title:'金额',width:150,fixed:true,align:'center'},
						{field:'responseMen',title:'负责人',width:100,fixed:true,align:'center'},
						{field:'createDate',title:'操作时间',width:150,fixed:true,align:'center',sortable:true,
							formatter:function(v,i,r){
								if(v!=undefined){
									v = v.substring(0,10);
								}
								return v;
							}
						},
						{field:'content',title:'备注',width:300,fixed:true,align:'center'},
						{field:'at',title:'操作',width:100,fixed:true,align:'center',
							formatter:function(v,r,i){
								v = '';
								v += '<a onclick="editData('+i+')" href="#" style="color:blue;text-decoration:none">编辑<a/>';
								v += '&nbsp;|&nbsp;';
								v += '<a onclick="delData('+i+')" href="#" style="color:red;text-decoration:none">删除<a/>';
								return v;
							},
							styler:function(v,r,i){
								return 'background-color:#d4d4d4'
							}
						}
					]]
				});
				//dg.datagrid('loadData',json);
				//刷新分页
				setTimeout(function(){dg.datagrid({loadFilter:pagerFilter}).datagrid('loadData')},10);
				$('input[name="iotype"]').click(function(){
					val =  $('input[name="iotype"]:checked').val();
					$('#detatype').combobox({
						url:'${ctx}/ftc/find/'+val+'.coc',    
					    valueField:'name',    
					    textField:'name'
					});
				});
			});
			
			function addData(){
				openDiglog("新增窗口",'');
			}
			function editData(index){
				dg.datagrid('selectRow',index);
				var row = dg.datagrid('getSelected');
				openDiglog('编辑窗口',row);
			}
			function openDiglog(title,row){
				//$('body').append('<div id="d1"></div>');
				//$('#d1').dialog({
				//alert(row.id);
				var vals = '?fid=-1';
				var url = '${ctx}/fc/insertNoFile.coc';
				if(row!=''){
					vals = '?fid='+row.id;
					url = '${ctx}/fc/edit.coc';
				}
				parent.$.modalDialog({	
					title:title,
					href:'${ctx}/fc/aoe.coc'+vals,
					modal:true,
					width:500,
					height:400,
					buttons:[{
						text:'保存',
						iconCls:'icon-save',
						plain:true,
						handler:function(){
							var f = parent.$.modalDialog.handler.find('#dataForm');
							
							if(f.form('validate')){
								var option = {
									type:'post',
									url:url,
									dataType:'json',
									success:function(r){
										alert(r.msg);
										if(r.is){
											parent.$.modalDialog.handler.dialog('close');
											dg.datagrid('reload');
										}
									}
								};
								f.ajaxSubmit(option);
							}
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						plain:true,
						handler:function(){
							parent.$.modalDialog.handler.dialog('close');//销毁
						}
					}]
				});
			}
			function delData(index){
				dg.datagrid('selectRow',index);
				var row = dg.datagrid('getSelected');
				var msg = '<p style="font-weight:bold">是否真的删除记录</p><p style="font-size:12px;color:#d4d4d4">数据只做物理删除</p>';
				$.messager.confirm('系统警告',msg,function(r){
					if(r){
						
						$.ajax({
							type:'get',
							url:'${ctx}/fc/remove/'+row.id+'.coc',
							dataType:'json',
							success:function(r){
								$.messager.alert('系统提示',r.msg,'info');
								if(r.is){
									dg.datagrid('reload');
								}
							}
						});
					}
				});
			}
			function batchDel(){
				var rows = dg.datagrid('getChecked');
				if(rows.length>0){
					var ids = new Array();
					$.each(rows, function(i,row) {
						ids.push(row.id);
					});
					$.ajax({
						type:'get',
						url:'${ctx}/fc/batchDel.coc?ids='+ids,
						dataType:'json',
						success:function(r){
							$.messager.alert('系统提示',r.msg,'info');
							if(r.is){
								dg.datagrid('reload');
							}
						}
					});
					
				}else{
					$.messager.alert('系统警告','选择要删除的记录','info');
				}
			}
			function queryData(){
				var iotype = $('input[name="iotype"]:checked').val();
				var detatype = $('#detatype').combobox('getValue');
				var responseMen = $('#responseMen').textbox('getValue');
				var startDate = $('#startDate').datebox('getValue');
				var endDate = $('#endDate').datebox('getValue');
				//alert(iotype+'==='+detatype+'=='+responseMen+'==='+startDate+'==='+endDate);
				
			 //var f = $('#searchForm');
				$.ajax({
					type:'get',
					url:'${ctx}/fc/find.coc',
					data:{
						iotype:iotype,
						detaType:detatype,
						responseMen:responseMen,
						startDate:startDate,
						endDate:endDate
					},
					dataType:'json',
					success:function(r){
						$('#table').datagrid('loadData',r);
					}
				});
			}
			function reoadPage() {
				window.location.reload();
			}
		</script>
	    <div data-options="region:'north',border:false" style="height:90px;">
	    	<div style="height: 30px;padding: 10px;min-width: 400px;">
	    		<form id="searchForm">
	    			<table class="searchTb">
	    				<tr>
	    					<td>
	    						<div style="border: 1px solid #CCC;width: 90px;height: 13px;float: left;padding: 5px 10px;border-radius: 5px;">
		    						<input type="radio" name="iotype" value="0">收入 
									&nbsp;&nbsp;
									<input type="radio" name="iotype" value="1" >支出
	    						</div>
	    						&nbsp;&nbsp;&nbsp;&nbsp;
	    						详细类型:<input id="detatype" class="easyui-combobox" name="detaType"/>
	    						&nbsp;&nbsp;&nbsp;&nbsp;
	    						负责人:<input class="easyui-textbox" id="responseMen" name="responseMen" style="border-radius:0px" />
	    						&nbsp;&nbsp;&nbsp;&nbsp;
	    						开始时间:<input class="easyui-datebox" enable=false id="startDate" name="startDate">
	    						结束时间:<input class="easyui-datebox" enable=false id="endDate" name="endDate">
	    					</td>
	    					<td>
	    						<a onclick="queryData()" class="easyui-linkbutton" iconCls="icon-search">查询一下</a>
	    					</td>
	    				</tr>
	    			</table>
	    		</form>
	    	</div>
	    	
	    	<div id="tb" style="height: 36px;
	    		border:1px solid #d4d4d4;margin: 0px 10px;">
	    		<ul>
	    			<li>
	    				<a onclick="addData()" class="easyui-linkbutton" plain=true iconCls="icon-eadd">新增</a>
	    			</li>
	    			<li style="width: 150px;">
	    				<a onclick="batchDel()" class="easyui-linkbutton" plain=true iconCls="icon-delete">批量删除(ctrl多选)</a>
	    			</li>
	    			<li>
	    				<a onclick="sunData()" class="easyui-linkbutton" plain=true iconCls="icon-pie">统计</a>
	    			</li>
	    			<li>
	    				<a onclick="redoData()" class="easyui-linkbutton" plain=true iconCls="icon-redo">导出</a>
	    			</li>
	    			<li style="width: 120px">
	    				<a onclick="reoadPage()" class="easyui-linkbutton" plain=true iconCls="icon-reload">重新加载页面</a>
	    			</li>
	    		</ul>
	    	</div>
	    </div>  
	    	
	    <div data-options="region:'center',border:false" style="padding:10px;background:#fff;">
	    	<div style="height: 25px;">
	    		总收入:￥<font style="color:blue;">2000.00</font>
	    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	    		总支出:￥<font style="color:red;">-1000.00</font>
	    	</div>
	    	<table id="table"></table>
	    </div>   
	</body>  
</html>
